import React from 'react'
import Bread from '../../../components/breadcrumb/Bread'
import { Button, Form, Input, Select } from 'antd';
import { Col, Row } from 'antd';
import { useState } from 'react';
import { Space, Table } from 'antd';
import { Divider, Radio } from 'antd';
import deptApi from '../../../aips/dept'
import { useEffect } from 'react';
import { SettingOutlined } from '@ant-design/icons'
import DewrChild from './DewrChild';
const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
const Dept = () => {
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log(values);
    };
    const onReset = () => {
        form.resetFields();
    };

    useEffect(() => {
        deptApi.dept().then(res => {
            setData(res.rows.children)
        })
    }, [])
    const [data, setData] = useState([])
    const [filteredInfo, setFilteredInfo] = useState({});
    const [sortedInfo, setSortedInfo] = useState({});
    const handleChange = (pagination, filters, sorter) => {
        console.log('Various parameters', pagination, filters, sorter);
        setFilteredInfo(filters);
        setSortedInfo(sorter);
    };
    const clearFilters = () => {
        setFilteredInfo({});
    };
    const clearAll = () => {
        setFilteredInfo({});
        setSortedInfo({});
    };
    const setAgeSort = () => {
        setSortedInfo({
            order: 'descend',
            columnKey: 'age',
        });
    };
    const columns = [
        {
            title: '名称',
            dataIndex: 'title',
        },
        {
            title: '排序',
            dataIndex: 'key',
        },

        {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: (a, b) => a.createTime > b.createTime,
            sortOrder: sortedInfo.field === 'createTime' ? sortedInfo.order : null,
            ellipsis: true,
            
        },
        {
            title: '修改时间',
            dataIndex: 'modifyTime',
            sorter: (a, b) => a.modifyTime.length > b.modifyTime.length,
            sortOrder: sortedInfo.field === 'modifyTime' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '操作',
            dataIndex: 'name',
            render: (_, record) => <SettingOutlined style={{ color: '#1189FE' }} onClick={showDrawer} />
        },
    ];
    const [selectionType, setSelectionType] = useState('checkbox');
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    return (
        <div>
            <Bread></Bread>
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} style={{ margin: '20px 0px' }}>
                <Row>
                    <Col span={8}>
                        <Form.Item
                            name="note"
                            label="名称"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="note"
                            label="创建时间"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" style={{ marginRight: '20px' }}>
                                查询
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>

                        </Form.Item>
                    </Col>
                </Row>


            </Form>
            <>
                <Table rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }} columns={columns} dataSource={data} onChange={handleChange} />
            </>
            <DewrChild onClose={onClose} open={open}></DewrChild>
        </div>
    )
}

export default Dept